const {useState, useEffect, useRef, useMemo} = React;

/**
 * 节流加防抖结合
 * @param fn
 * @param delay
 */
function throttle(fn, delay) {
  let last = 0,
    timer = null;

  return function() {
    let context = this;
    let args = arguments;
    let now = +new Date();
    if (now - last > delay) {
      last = now;
      fn.apply(context, args);
    }
    clearTimeout(timer);
    timer = setTimeout(function() {
      last = now;
      fn.apply(context, args);
    }, delay);
  };
}

function useBottomBtn(ref) {
  const [bottom, setBottom] = useState(-200);
  const clientTop = useMemo(() => {
    let clientTop = 0;
    if (ref.current) {
      let node = ref.current;
      let BoundingClientRect = node.getBoundingClientRect();
      clientTop =
        clientTop + BoundingClientRect.top + BoundingClientRect.height * 0.7;
    }
    return clientTop;
  }, [ref.current]);

  /**
   * 获取元素高度，乘 0.7 因为图片太高 按钮大概3分之2
   */
  const clientHeight = useMemo(() => {
    let clientHeight = 0;
    if (ref.current) {
      let node = ref.current;
      let BoundingClientRect = node.getBoundingClientRect();
      clientHeight = BoundingClientRect.height * 0.7;
    }
    return clientHeight;
  }, [ref.current]);

  // 更新 bottom 的值
  const setBottomBtn = () => {
    debugger;
    const scrollHeight = window.pageYOffset - clientTop - clientHeight;
    // 为啥 clientTop 和 clientHeight 值没更新
    console.log(window.pageYOffset, clientTop, clientHeight);
    if (ref.current) {
      setBottom(0);
    }
  };
  return [bottom, setBottomBtn];
}

function App() {
  const bottomBtnRef = useRef(null);
  const [bottom, setBottomBtn] = useBottomBtn(bottomBtnRef);
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  useEffect(() => {
    console.log('call effect');
    const srollHandle = throttle(setBottomBtn, 100);
    window.addEventListener('scroll', srollHandle);
    return () => {
      console.log('call uneffect');
      window.removeEventListener('scroll', srollHandle);
    };
  });

  useEffect(() => {
    // setTimeout(() => {
    //   ReactDOM.unstable_batchedUpdates(() => {
    //     debugger;
    //     setName('qhw');
    //     debugger;
    //     setAge(26);
    //   });
    // }, 2000);
    debugger;
    setTimeout(() => {
      setName('qhw');
      setAge(26);
    }, 2000);
  }, []);

  return (
    <div className="App">
      <p onClick={() => setName('qhw1')}>userName: {name}</p>
      <p>age: {age}</p>
      <div className="A-area">区域A</div>
      <button ref={bottomBtnRef} className="button-middle">
        这个是中间的按钮
      </button>
      <div className="B-area">区域B</div>

      <button className="button-footer" style={{bottom: bottom}}>
        这个是要求定位在底部的按钮
      </button>
    </div>
  );
}

// class App extends React.Component {
//   constructor() {
//     super();
//     console.log('constructor');
//     this.state = {
//       count: 1,
//     };
//   }

//   add = () => {
//     this.setState({
//       count: 2,
//     });
//   };
//   render() {
//     const {count} = this.state;
//     return <div onClick={this.add}>{count}</div>;
//   }
// }

debugger;
ReactDOM.render(<App />, document.getElementById('container'));
